<template>
  <div>
    <van-sticky :offset-top="0">
      <!-- 顶部导航 -->
      <van-nav-bar
        :title="type"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>

    <!-- banner -->
    <img class="banner" src="@/assets/hotgoods.jpg" alt="" />
    <div class="sort">
      <div class="item" @click="change('综合')" :class="num == 1 ? 'act' : ''">
        综合
      </div>
      <div class="item" @click="change('价格')" :class="num == 2 ? 'act' : ''">
        价格
      </div>
      <div class="icon">
        <van-icon
          :class="count == 1 ? 'act' : ''"
          @click="price('up')"
          name="arrow-up"
        />
        <van-icon
          :class="count == 2 ? 'act' : ''"
          @click="price('down')"
          name="arrow-down"
        />
      </div>
      <div class="item" @click="change('分类')" :class="num == 3 ? 'act' : ''">
        分类
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="goods">
      <div
        class="item"
        @click="togoodsinfo(item.id)"
        v-for="item in datalist"
        :key="item.id"
      >
        <img :src="item.list_pic_url" alt="" />
        <h3>{{ item.name }}</h3>
        <p>{{ item.retail_price }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { index, goodsList, detailaction, listaction } from "@/api/home/index";
export default {
  components: {},

  data() {
    return {
      datalist: [],
      type: "",
      num: 1,
      count: 1,
    };
  },

  created() {
    var type = this.$route.params.type;
    if (type == "isHot") {
      this.type = "人气推荐";
      goodsList({
        isHot: "1",
        isNew: "",
        order: "asc",
      }).then((res) => {
        this.datalist = res.data;
        console.log(res);
      });
    } else {
      this.type = "新品首发";
      goodsList({
        isHot: "",
        isNew: "1",
        order: "asc",
      }).then((res) => {
        this.datalist = res.data;
        console.log(res);
      });
    }
  },

  mounted() {},

  methods: {
    //到商品详细页
    togoodsinfo(goodsid) {
      console.log(goodsid);
      this.$router.push({
        name: "goodsinfo",
        params: {
          id: goodsid,
        },
      });
    },

    //   价格排序
    price(type) {
      console.log(type);
      if (type == "up") {
        this.count = 1;
        this.num = 2;
        if (this.type == "人气推荐") {
          goodsList({
            isHot: "1",
            isNew: "",
            order: "asc",
          }).then((res) => {
            this.datalist = res.data;
            console.log(res);
          });
        } else {
          goodsList({
            isHot: "",
            isNew: "1",
            order: "asc",
          }).then((res) => {
            this.datalist = res.data;
            console.log(res);
          });
        }
      } else {
        this.count = 2;
        this.num = 2;
        if (this.type == "人气推荐") {
          goodsList({
            isHot: "1",
            isNew: "",
            order: "desc",
          }).then((res) => {
            this.datalist = res.data;
            console.log(res);
          });
        } else {
          goodsList({
            isHot: "",
            isNew: "1",
            order: "desc",
          }).then((res) => {
            this.datalist = res.data;
            console.log(res);
          });
        }
      }
    },
    //   切换分类
    change(type) {
      if (type == "综合") {
        this.num = 1;
      } else if (type == "价格") {
        this.num = 2;
      } else {
        this.num = 3;
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },

  computed: {},

  watch: {},
};
</script>

<style scoped lang='less'>
// 商品列表区
.goods {
  width: 375px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    width: 185px;
    margin-top: 5px;
    background-color: #fff;
    img {
      width: 151px;
    }
    h3 {
      margin: 5px auto;
    }
    p {
      color: red;
      margin-bottom: 20px;
    }
  }
}
.banner {
  width: 375px;
}
.sort {
  margin-top: -2px;
  width: 375px;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  .item {
    width: 54px;
    height: 40px;
    text-align: center;
    line-height: 40px;
  }
  .icon {
    height: 34px;
    width: 10px;
    padding-top: 6px;
  }
  .act {
    color: red;
  }
}
</style>